<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input
          clearable
          @clear="search()"
          v-model="pageDto.where.name"
          placeholder="请输入产品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          clearable
          @clear="search()"
          v-model="pageDto.where.username"
          placeholder="请输入用户名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          clearable
          @clear="search()"
          v-model="pageDto.where.productKey"
          placeholder="请输入产品标识"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="pageDto.where.areaName" placeholder="请选择行政区">
          <el-option
            v-for="item in areaList"
            :value="item.name"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="search()"
          >查询</el-button
        >
        <el-button icon="el-icon-delete" @click="deleteItem()" type="danger"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="productList" stripe style="width: 100%">
      <el-table-column prop="name" label="产品名称" width="180">
      </el-table-column>
      <el-table-column prop="tenantName" label="所属租户" width="80">
      </el-table-column>
      <el-table-column prop="areaName" label="行政区" width="80">
      </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="productKey" label="产品标识key"> </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDto.now"
      :page-sizes="[5, 15, 50, 100]"
      :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { page, allArea } from "@/api/product";
export default {
  data() {
    return {
      pageDto: {
        now: 1,
        size: 5,
        where: {
          name: "",
          username: "",
          productKey: "",
          areaName: "",
        },
      },
      total: 0,
      productList: [],
      areaList: [],
    };
  },
  methods: {
    search() {
      page(this.pageDto).then((res) => {
        this.productList = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(size) {
      this.size = size;
      this.search();
    },
    handleCurrentChange(page) {
      this.pageDto.now = page;
      this.search();
    },
    allArea() {
      allArea().then((res) => {
        this.areaList = res.data;
      });
    },
    deleteItem() {
      this.pageDto.where.name = "";
      this.pageDto.where.username = "";
      this.pageDto.where.productKey = "";
      this.pageDto.where.areaName = "";
      this.search();
    },
  },
  created() {
    this.search();
    this.allArea();
  },
};
</script>
